<template>
  <div class="card">
    <div class="inputList">
      <div class="top">
        <a-input class="input" v-model="formData.search.realname" placeholder="触发用户"></a-input>
        <a-input class="input" v-model="formData.search.phone" placeholder="触发用户手机号"></a-input>
        <a-input class="input" v-model="formData.search.profit_realname" placeholder="收益用户"></a-input>
        <a-input class="input" v-model="formData.search.profit_phone" placeholder="收益用户手机号"></a-input>
        <a-select v-model="formData.search.status" placeholder="请选择状态" style="width: 200px">
          <a-select-option v-for="(item, index) in statusOption" :key="index" :value="index">
            {{ item }}
          </a-select-option>
        </a-select>
      </div>
      <div class="bottom">
        <a-range-picker
          style="margin-right: 10px"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['触发开始时间', '触发结束时间']"
        />
        <a-range-picker
          style="margin-right: 10px"
          :show-time="{ format: 'HH:mm' }"
          format="YYYY-MM-DD HH:mm"
          :placeholder="['下发开始时间', '下发结束时间']"
        />
        <a-button class="button" type="primary" @click="getActivateList">查询</a-button>
        <a-button class="button" @click="reset">重置</a-button>
        <a-button class="button" type="primary" @click="batchDelivery">下发激活奖励</a-button>
      </div>
    </div>
    <p class="moneyStyle">
      未下发金额：{{ info.unissued }} 元 已下发金额：{{ info.issued }} 元 合计：{{ info.total_money }} 元
    </p>
    <a-spin :spinning="loading">
      <a-table
        :pagination="{
          pageSize: formData.page_size,
          pageSizeOptions: ['20', '30', '40', '50'],
          size: 'small',
          showSizeChanger: true,
          showQuickJumper: true,
          total: total,
          current: formData.page,
          showTotal: total => `共 ${total} 条`
        }"
        @change="paginChange"
        show-size-changer
        show-quick-jumper
        :rowKey="(record, index) => index"
        :row-selection="rowSelection"
        bordered
        :columns="columns"
        :data-source="tableData"
      >
        <span slot="slotStatus" slot-scope="text, record">
          <div v-if="record.status == '0'">未下发</div>
          <div v-else-if="record.status == '1'">已下发</div>
        </span>
        <span slot="reimburse" slot-scope="text, record">
          <div v-if="record.type == '1'">代还</div>
        </span>
        <span slot="operate" slot-scope="text, record">
          <a-button :disabled="record.status == 0 ? false : true" type="primary" @click="issue(record.id)"
            >下发</a-button
          >
        </span>
        <!-- <template slot="operate"> 123 </template> -->
      </a-table>
    </a-spin>
  </div>
</template>

<script>
import { getActivateListAPI, issueAPI } from '@/api/income.js'
export default {
  name: 'activateaward',
  data() {
    return {
      info: {
        unissued: '',
        issued: '',
        total_money: ''
      },
      select_rows: [],
      selectedRowKeys: [],
      loading: false,
      total: 0,
      formData: {
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID, // 刷卡人
          realname: '', // 触发用户
          phone: '', //触发用户手机号
          profit_realname: '', // 收益用户
          profit_phone: '', // 收益用户手机号
          status: '' // 状态
        }
      },
      statusOption: { 0: '未下发', 1: '已下发' },
      columns: [
        {
          title: '注册时间',
          dataIndex: 'transaction_ctime',
          align: 'center'
        },
        {
          title: '触发用户',
          dataIndex: 'transaction_realname',
          align: 'center'
        },
        {
          title: '触发用户手机号',
          dataIndex: 'transaction_phone',
          align: 'center'
        },
        {
          title: '代还金额',
          dataIndex: 'transaction_money',
          align: 'center'
        },
        {
          title: '收益用户',
          dataIndex: 'profit_realname',
          align: 'center'
        },
        {
          title: '收益用户手机号',
          dataIndex: 'profit_phone',
          align: 'center'
        },
        {
          title: '收益',
          dataIndex: 'activation_money',
          align: 'center'
        },
        {
          title: '状态',
          dataIndex: 'status',
          align: 'center',
          scopedSlots: { customRender: 'slotStatus' }
        },
        {
          title: '类型',
          dataIndex: 'type',
          align: 'center',
          scopedSlots: { customRender: 'reimburse' }
        },
        {
          title: '触发时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '下发时间',
          dataIndex: 'handtime',
          align: 'center'
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: { customRender: 'operate' }
        }
      ],
      tableData: []
    }
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.status == '1'
          }
        })
      }
    }
  },
  created() {
    this.getActivateList()
  },
  methods: {
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getActivateList()
    },
    reset() {
      this.formData = {
        page: 1,
        page_size: 50,
        search: {
          brand_id: process.env.VUE_APP_BRAND_ID,
          realname: '',
          phone: '',
          profit_realname: '',
          profit_phone: '',
          status: ''
        }
      }
      this.getActivateList()
    },
    async getActivateList() {
      try {
        this.loading = true
        this.selectedRowKeys = []
        const { data } = await getActivateListAPI(this.formData)
        this.tableData = data.list
        this.total = data.total
        this.info.unissued = data.unissued
        this.info.issued = data.issued
        this.info.total_money = data.total_money
      } finally {
        this.loading = false
      }
    },

    // 下发
    issue(id) {
      this.$confirm({
        title: '确定下发给当前用户吗?',
        onOk: async () => {
          const send = { brand_id: process.env.VUE_APP_BRAND_ID, id: [] }
          send.id.push(id)
          const { msg } = await issueAPI(send)
          this.getActivateList()
          this.$message.success(msg)
        },
        onCancel() {
          return
        }
      })
    },

    // 批量下发
    async batchDelivery() {
      if (this.select_rows.length < 1) return this.$message.error('至少选择一条需要下发的用户!')
      const payload = { brand_id: process.env.VUE_APP_BRAND_ID, id: [] }
      payload.id.push(...this.select_rows.map(item => item.id))
      const { msg } = await issueAPI(payload)
      this.getActivateList()
      this.$message.success(msg)
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 10px;
  background-color: #fff;
}
.inputList {
  display: flex;
  flex-direction: column;
}
.top {
  margin-bottom: 10px;
}
.input {
  margin-right: 10px;
  margin-right: 10px;
  width: 200px;
}
.moneyStyle {
  margin-top: 10px;
  padding: 10px;
  background-color: #f2f2f2;
  color: black;
}
.paging {
  display: flex;
  flex-direction: row-reverse;
  padding: 10px;
}
.button {
  margin-right: 10px;
}
</style>
